<script>
import { computed, defineComponent } from 'vue'
import * as Antd from 'ant-design-vue'
import { formtNumber } from '@Untils'

export default defineComponent({
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  setup(props, context) {
    let product = computed(() => {
      return props.product
    })

    let getTagsList = (_list) => {
      return _list?.map((x) => {
        return (
          <div>
            <div class="green">{x.name}</div>
            <Antd.Space style={{ flexWrap: 'wrap' }}>
              {x.child.map((xx) => {
                return <span class="ant-statistic-title">{xx.name}</span>
              })}
            </Antd.Space>
          </div>
        )
      })
    }

    return { product, getTagsList }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        <Antd.Col
          span={10}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            border: '1px solid #f0f0ff',
          }}
        >
          <img src={this.product.fileUrl} style={{ 'max-height': '160px' }} />
        </Antd.Col>
        <Antd.Col span={14}>
          <div class="product_attr_list">
            <div>
              <span>名称：</span>
              <span>{this.product.name}</span>
            </div>
            <div>
              <span>作者：</span>
              <span>{this.product.operatorName}</span>
            </div>
            <div>
              <span>上传：</span>
              <span>{this.product.createTime}</span>
            </div>
            <div>
              <span>评分：</span>
              <span class="green">
                {formtNumber(this.product.score, '0.00')}
              </span>
            </div>
            <div>
              <span>备份：</span>
              <span>
                {' '}
                {this.product.star > 0
                  ? formtNumber(this.product.star, '0,00')
                  : '-'}
              </span>
            </div>
          </div>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
<style scoped>
.product_attr_list {
  width: 100%;
  overflow: hidden;
}
.product_attr_list > div {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #f0f0ff;
  padding: 10px;
}
.product_attr_list > div > span:nth-child(1) {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin-bottom: 4px;
}
</style>
